<template>
  <div class="show_right_item" @mouseenter="isHover = true" @mouseleave="isHover = false" >
    <img
      class="card-img"
      :src="isHover ? goodInfo.hoverImgUrl : goodInfo.defaultImgUrl"
      :data-id="goodInfo.id"
    />
    <p class="card-title"><a :data-id="goodInfo.id">{{ goodInfo.title }}</a></p>
    <p class="price">
      ￥{{ goodInfo.reducedPrice
      }}<span class="original-price">￥{{ goodInfo.defaultPrice }}</span>
    </p>
  </div>
</template>
<script lang="ts">
  export default {
    name: "Card",
  };
</script>
<script setup lang="ts">
  import type { Banners } from "@/api/home/interface";
  import { ref } from "vue";
  interface Props {
    goodInfo: Banners;
  }
  defineProps<Props>();
  const isHover = ref<boolean>(false);
</script>
<style scoped lang="less">
  .show_right_item {
    width: 265px;
    height: 365px;
    text-align: center;
    background-color: #fff;
    cursor: pointer;
    &:hover{
        background-color: #F3F0EA;
    }
    .card-img {
      width: 100%;
      height: 265px;
      background-color: #f4f4f4;
    }
    .card-title {
      font-size: 13px;
      font-weight: bold;
      width: 130px;
      margin: 0 auto;
      margin-top: 20px;
      line-height: 15px;
      color: #333;
      &:hover{
        color: #b4a078;
      }
    }
    .price {
      margin-top: 10px;
      font-size: 13px;
      color: #d4282d;
    }
    .original-price {
      margin-left: 6px;
      text-decoration: line-through;
      color: #999;
    }
  }
</style>
